<template>
    <div>
        <el-card class="box-card">
            <el-row :gutter="20">
                <el-col :span="8">
                    <!-- 搜索与添加区域 -->
                    <el-input placeholder="请输入内容"
                              v-model="queryInfo.query" clearable @clear="getUserList">
                        <template #append>
                            <el-button @click="getUserList"><el-icon><search /></el-icon></el-button>
                        </template>
                    </el-input>
                </el-col>
            </el-row>

<!--            <div v-for="item in datalist" :key="item" @click="handetail(item.name)">-->
<!--                <li>{{ item.name }}</li>-->
<!--            </div>-->
            <div>
                <h3>
                    文章列表
                </h3>
                <el-divider>
                    <el-icon>
                        <star-filled/>
                    </el-icon>
                </el-divider>


              <el-row :gutter="20" v-if="!queryInfo.query && datalist.type != 'dir'" v-for="item in datalist" :key="item">
                  <el-col :span="12"  @click="handetail(item.name)" >{{ item.name }}<div class="grid-content ep-bg-purple"/></el-col>
                  <el-col :span="10">{{ item.path }} & {{ item.type }}<div class="grid-content ep-bg-purple" /></el-col>
                  <el-col :span="2"><el-button type="danger" @click="deletefile(item.name,item.sha)">Delete</el-button><div class="grid-content ep-bg-purple" /></el-col>
                  <el-divider>
                      <el-icon>
                          <star-filled/>
                      </el-icon>
                  </el-divider>
              </el-row>
              <el-row :gutter="10"  v-else="queryInfo.query" @click="handetail(datalist.name)">
                <el-col :span="8">{{ datalist.name }}<div class="grid-content ep-bg-purple"  @click="handetail(item.name)" /></el-col>
                <el-col :span="8">{{ datalist.path }} & {{ datalist.type }}<div class="grid-content ep-bg-purple" /></el-col>
                <el-divider>
                  <el-icon>
                    <star-filled/>
                  </el-icon>
                </el-divider>
              </el-row>
            </div>

            <!--页码-->
            <el-pagination v-model:currentPage="queryInfo.pagenum"
                           :page-sizes="queryInfo.pagesizes"
                           :page-size="queryInfo.pagesize"
                           :total="total"
                           @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           layout="total, sizes, prev, pager, next, jumper">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
import axios from "axios";
import {Base64} from "js-base64";

export default {
    data () {
        return {
            // 获取用户列表的参数对象
            queryInfo: {
                query: '', // 查询参数
                pagesizes: [1, 3, 5], // page-sizes每页显示条数
                pagenum: 1, // 当前页码
                pagesize: 1 // 每页显示条数
            },
            // 总数据条数
            total: '',
            // 内容
            datalist: [],
        }
    },
    created () {
        this.getUserList()
      // console.log(gitee_config.Url)
    },
    methods: {
        async getUserList () {
            // const { config: res } = await this.$http.get('users', {
            //     params: this.queryInfo
            // })
            // if (res.meta.status !== 200) return this.$message.error('获取用户列表失败')
            // this.userlist = res.config.users
            // this.total = res.config.total
            //     ?access_token=b03f89ca80a684fb34dde249e8f5eebd

          let query = this.queryInfo.query
          if (query) {
            axios.get(
            gitee_config.url + query + '?ref=' + gitee_config.ref + '&access_token=' + gitee_config.access_token,
            ).then((res) => {
                this.datalist = res.data
                console.log(this.datalist)
                this.total = res.data.length
                // console.log(this.datalist.length)
            })
          } else {
            axios.get(
                gitee_config.url + '?ref=' + gitee_config.ref + '&access_token=' + gitee_config.access_token,
            ).then((res) => {
              this.datalist = res.data
              console.log(this.datalist)
              this.total = res.data.length
              // console.log(this.datalist.length)
            })
          }
        },
      deletefile (name,sha) {
        axios.delete(
            gitee_config.url + name + '?access_token=' + gitee_config.access_token + '&sha=' + sha +'&message=' + gitee_config.delete_message + '&branch=' + gitee_config.branch
          ).then((res) => {
            this.data = res.data
            console.log(this.data)
            // this.content = Base64.decode(res.config.content) //解密并转成json

          })
        this.getUserList()
        },
        // 跳转详情页动态传参
        handetail (path) {
            // location.href = '#/detail'
            // 通过路劲跳转
            // this.$router.push(`/detail/${id}`)
            // 通过命名路由跳转
            this.$router.push({
                name: 'Info',
                params: {
                    path: path
                }
            })
        },
        // 监听 page size 改变事件
        handleSizeChange (nemSize) {
            this.queryInfo.pagesize = nemSize
            this.getUserList()
        },
        // 监听 页码值 改变事件
        handleCurrentChange (newPage) {
            this.queryInfo.pagenum = newPage
            this.getUserList()
        },
    }
}
</script>


<style scoped>

.grid-content {
  border-radius: 4px;
}
</style>
